<!-- 学社 - 服务 - 结束服务 -->
<template>
  <view>
    <z-navbar title="结束服务" :border-bottom="true" bg-color="#F4AE20"></z-navbar>
    <view class="px-4 pt-5">
      <view class="c-#333 text-32 font-bold mb-4">服务评价</view>
      <view class="relative">
        <image class="absolute top-36 left-0 w-28 h-24 z-2 ml-4" src="/static/images/home/ic_edit.png"></image>
        <u-input v-model="state.content" type="textarea" height="450" auto-height placeholder="请您填写评价"
          placeholder-style="color: #999; fontSize: 24rpx" :custom-style="inputStyle" />
        <!-- <view class="absolute bottom-30 right-0 z-2 c-#999 text-24">{{ enteredNum }}/{{ state.maxInputNum }}</view> -->
      </view>
      <!-- 评价 -->
      <view class="flex items-center mt-4 h-80">
        <view class="flex items-center">
          <view v-for="(item, index) in state.rateList" :key="index" @click="onRate(index)">
            <image v-if="!item.isSelected" class="w-80 h-80" src="/static/images/home/ic_rate_default.png"></image>
            <image v-else class="w-80 h-80" :src="`/static/images/home/ic_rate_${index}.png`"></image>
          </view>
        </view>
        <view class="c-#666 text-28 ml-3">欢迎下次光临!</view>
      </view>
    </view>
    <view class="bottom-wrap-16 bg-white">
      <u-line color="#eee" />
      <view class="btn-submit" @click="onSubmit">提交评价</view>
    </view>
  </view>
</template>

<script setup>
import { showToast } from '@/common/util/uni';
import { refreshPrePage } from '@/common/util/util'
import { postDirectorsFinish } from '@/common/http/module/society.js'

const state = reactive({
  diagnosis_id: '', // 诊断id
  rateList: [{ isSelected: false }, { isSelected: false }, { isSelected: false }, { isSelected: false }, { isSelected: false }],
  content: '',
})

const inputStyle = {
  backgroundColor: '#F5F5F5',
  padding: '32rpx 32rpx 32rpx 70rpx',
  borderRadius: '12rpx'
}

// 点亮评价
function onRate (i) {
  state.rateList.forEach((v, vi) => {
    if (vi <= i) {
      v.isSelected = true
    } else {
      v.isSelected = false
    }
  })
}

function onSubmit () {
  if (!state.content) {
    showToast('请填写内容', 'error')
    return
  }
  // const isRate = state.rateList.some(v => v.isSelected)
  // if (!isRate) {
  //   showToast('请评价星级', 'error')
  // }
  const starNum = state.rateList.filter(v => v.isSelected).length
  postDirectorsFinish({
    diagnosis_id: state.diagnosis_id,
    content: state.content,
    star: starNum
  }).then(() => {
    showToast('评价成功')
    refreshPrePage('loadData')
    setTimeout(() => uni.navigateBack(), 600)
  })
}

onLoad((options) => {
  state.diagnosis_id = options.diagnosis_id
})
</script>

<style lang="scss" scoped></style>
